<template>
    <div class="nav">
        <div class="icon">
            <img :src="logo" alt="" />
            <h1>似水流年</h1>
        </div>
        <el-scrollbar height="calc(100vh - 70px)">
            <el-menu
                :default-active="active"
                :collapse="false"
                @open="handleOpen"
                active-text-color="#409EFF"
                background-color="#001529"
                text-color="#fff"
                :unique-opened="true"
                :default-openeds="[`${openTab}`]"
            >
                <div v-for="(item, index) in sideRouter" :key="item.menuId">
                    <el-sub-menu
                        v-if="item.children && item.children.length > 0"
                        :index="index.toString()"
                    >
                        <template #title>
                            <span>{{ item.name }}</span>
                        </template>
                        <el-menu-item-group>
                            <div v-for="(it, i) in item.children" :key="i">
                                <el-menu-item
                                    :index="`${index}-${i}`"
                                    @click="href(it)"
                                    >{{ it.name }}</el-menu-item
                                >
                            </div>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-menu-item
                        v-if="!item.children || item.children.length === 0"
                        :index="index.toString()"
                        @click="href(item)"
                    >
                        <span>{{ item.name }}</span>
                    </el-menu-item>
                </div>
            </el-menu>
        </el-scrollbar>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import logo from '@/assets/logo.png';
const store = useStore();
const router = useRouter();

const sideRouter = computed(() => store.getters.routes);
console.log('luyou', sideRouter.value);
const active = ref<string>('0');
const openTab = ref<string>('0');
const isCollapse = ref(true);
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
    openTab.value = key;
};
const href = (item: any) => {
    console.log('item', item.path);
    router.push(item.path);
};
</script>
<style lang="scss" scoped>
.nav {
    width: 100%;
    overflow: hidden;
    .icon {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        background-color: #fff;
        h1 {
            font-size: 32px;
            color: #000;
            font-weight: normal;
            margin-left: 20px;
        }
        img {
            max-height: 50%;
        }
    }
    .el-menu-vertical:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
}
</style>
